<template>
    <div class="box">
        <topLogo v-if="isPath"></topLogo>
        <div class="content">
            <div class="works-title" v-if="!isPath">TOP榜作品</div>
            <el-row type="flex" class="row-bg">
                <el-col :span="4">
                    <div class="top-list-left">
                        <div class="top-list-btn">
                            <div class="top-list-prev"></div>
                        </div>
                        <div class="top-num-list">
                            <el-menu
                            default-active="榜单一"
                            class="el-menu-vertical-demo"
                            text-color="#909399"
                            active-text-color="#409eff"
                            @select="handleSelect">
                            <el-menu-item index="榜单一">
                                <i class="el-icon-trophy"></i>
                                <span slot="title">Top 榜单一</span>
                            </el-menu-item>
                            <el-menu-item index="榜单二">
                                <i class="el-icon-trophy"></i>
                                <span slot="title">Top 榜单二</span>
                            </el-menu-item>
                            <el-menu-item index="榜单三">
                                <i class="el-icon-trophy"></i>
                                <span slot="title">Top 榜单三</span>
                            </el-menu-item>
                            <el-menu-item index="榜单四">
                                <i class="el-icon-trophy"></i>
                                <span slot="title">Top 榜单四</span>
                            </el-menu-item>
                            <el-menu-item index="榜单五">
                                <i class="el-icon-trophy"></i>
                                <span slot="title">Top 榜单五</span>
                            </el-menu-item>
                            </el-menu>
                        </div>
                        <div class="top-list-btn">
                            <div class="top-list-next"></div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="20">
                    <div class="top-list-right">
                        <div class="top-list-wrap">
                            <div class="top-list-item" v-for="(item, index) in workList" :key="index">
                                <a href="javascript:;" @click="goWork(item.navId, item.depFirstId, item.desId, item.id)">
                                    <el-row type="flex" class="top-list-itembox">
                                        <el-col :span="4">
                                            <el-avatar :src="circleUrl"></el-avatar>
                                        </el-col>
                                        <el-col :span="14">
                                            <div class="firstcter">
                                                <el-avatar shape="square" :size="100" fit="fit" :src="item.cover"></el-avatar>
                                                <div class="father-title">
                                                    <span class="top-title">【TOP榜】 
                                                        <span>{{item.title}}</span>
                                                    </span>
                                                    <span class="bottom-tittle">FROM 
                                                        <span>{{item.navigation}}</span>
                                                    </span>
                                                </div>
                                            </div>
                                        </el-col>
                                        <el-col :span="6">
                                            <div class="thumbs-up">
                                                <span class="bup">
                                                    <h4>{{item.star}}</h4>
                                                    <span>赞</span>
                                                </span>
                                                <span class="center-cut"></span>
                                                <span class="bup">
                                                    <h4>{{item.viewCount}}</h4>
                                                    <span>评论</span>
                                                </span>
                                            </div>
                                        </el-col>
                                    </el-row>
                                </a>
                            </div>
                            <el-empty v-if="!workList.length" description="暂无内容"></el-empty>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <div class="more-works" @click="goMore">查看更多作品</div>
        </div>
        <Footer v-if="isPath"></Footer>
    </div>
</template>

<script>
import topLogo from '../../components/top-logo.vue'
import Footer from '../../components/footer.vue'
export default {
    components: {
        topLogo,
        Footer
    },
    data() {
        return {
            circleUrl: "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
            isPath: false,
            queryInfo: {
                page: 1,  // 页数
                size: 1000, // 条数
            },
            workList: [],
            activeKey: '榜单一',
            firstItems: [], // 所有一级部门信息
        }
    },
    watch: {
        activeKey(newItem, oldItem) {
            this.workList = []
            this.getDataList(newItem)
        }
    },
    created() {
        this.getFirst()
        setTimeout(()=> {
            this.getDataList(this.activeKey)
        },3000)
    },
    mounted() {
        if(this.$route.path === '/top') {
            this.isPath = true
        }
    },
    methods: {
        handleSelect(key, keyPath) {
            this.activeKey = key
        },
        goBack() {
            this.$router.push('/')
        },
        // 获取所有作品
        getDataList(key) {
            this.$http.get(this.$api.allList, {params: this.queryInfo})
            .then(res => {
                if(res.data.status === 20000) {
                    res.data.data.records.map((value, index) => {
                        if(key === '榜单一' && value.star >= 20 && this.workList.length < 5) {
                            let tempFirst = null
                            this.firstItems.map((currentVal, currentInd) => {
                                if(currentVal.navId === value.navId) {
                                    tempFirst = currentVal.navigation
                                }
                            })
                            value.navigation = tempFirst
                            this.workList.push(value)
                        }else if(key === '榜单二' && (value.star >= 15 && value.star < 20) && this.workList.length < 5) {
                            let tempFirst = null
                            this.firstItems.map((currentVal, currentInd) => {
                                if(currentVal.navId === value.navId) {
                                    tempFirst = currentVal.navigation
                                }
                            })
                            value.navigation = tempFirst
                            this.workList.push(value)
                        }else if(key === '榜单三' && (value.star >= 10 && value.star < 15) && this.workList.length < 5) {
                            let tempFirst = null
                            this.firstItems.map((currentVal, currentInd) => {
                                if(currentVal.navId === value.navId) {
                                    tempFirst = currentVal.navigation
                                }
                            })
                            value.navigation = tempFirst
                            this.workList.push(value)
                        }else if(key === '榜单四' && (value.star >= 5 && value.star < 10) && this.workList.length < 5) {
                            let tempFirst = null
                            this.firstItems.map((currentVal, currentInd) => {
                                if(currentVal.navId === value.navId) {
                                    tempFirst = currentVal.navigation
                                }
                            })
                            value.navigation = tempFirst
                            this.workList.push(value)
                        }else if(key === '榜单五' && value.star < 5 && this.workList.length < 5) {
                            let tempFirst = null
                            this.firstItems.map((currentVal, currentInd) => {
                                if(currentVal.navId === value.navId) {
                                    tempFirst = currentVal.navigation
                                }
                            })
                            value.navigation = tempFirst
                            this.workList.push(value)
                        }
                    })
                }else {
                    this.$message.error(res.data.status)
                }
            })
            .catch(error => {
                console.log(error);
            })
        },
        getFirst() {
            this.$http.get(this.$api.secondNavigation)
            .then(res => {
                if(res.data.status === 20000) {
                    this.firstItems = res.data.data.navigation
                }
            })
            .catch(error => {
                console.log(error);
            })
        },
        goWork(navId, depFirstId, desId, id) {
            this.$router.push({
                path: '/computer/branchdetail/workdetail',
                query: {
                    firstId: navId,
                    secondId: depFirstId,
                    desId: desId,
                    workId: id
                }
            })
        },
        goMore() {
            this.$router.push('/works')
        }
    },
}
</script>

<style lang="less" scoped>
.content /deep/ .el-tabs__nav-scroll {
    display: flex;
    justify-content: center;
}
.content /deep/ .el-tabs__nav-wrap::after {
    background-color: #ffffff;
}
.content /deep/ .el-tabs__header {
    margin: 0;
}
.content /deep/ .el-page-header {
    margin-left: 20px;
    margin-top: 14px;
    margin-bottom: 14px;    
}
.content /deep/ .el-avatar>img {
    width: 100%;
}
.content {
    padding: 20px 18px;
    padding-bottom: 20px;
    background: #fafafa;
    .works-title {
        text-align: start;
        font-size: 25px;
        padding: 20px 0;
    }
    .more-works {
        margin-top: 30px;
        height: 70px;
        line-height: 70px;
    }
    .more-works:hover {
        background: #ffffff;
        color: #1E90FF;
        border-radius: 8px;
        cursor: pointer;
    }
}
.row-bg {
    .top-list-left {
        background: url(../../assets/images/top-bg.png);
        background-repeat: round;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .top-list-btn {
            padding: 35px 0 20px;
            height: 42px;
            display: flex;
            justify-content: center;
            .top-list-prev,.top-list-next {
                width: 42px;
                height: 42px;
                background: url(../../assets/images/top-change-icon.png) no-repeat;
                background-size: 100% auto;
            }
            .top-list-next {
                transform: rotate(180deg);    
            }
        }
        .top-num-list {
            width: 100%;
            list-style: none;
            li {
                display: flex;
                align-items: center;
                justify-content: center;
                color: #ffffff;
                margin-bottom: 20px;
                height: 70px;
                white-space: break-spaces;
                line-height: 17px;
                border-radius: 6px 0 0 6px;
                cursor: pointer;
                // &:hover {
                //     background: tomato;
                // }
            }
        }
    }
    .top-list-right {
        .top-list-wrap {
            display: flex;
            flex-direction: column;    
            .top-list-item {
                width: 100%;
                a {
                    .top-list-itembox {
                        display: flex;
                        background: #ffff;
                        align-items: center;
                        padding: 20px 10px;
                        border-bottom: 1px solid #ebeef5;  
                        .firstcter {
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            .father-title {
                                display: inline-flex;
                                flex-direction: column;
                                line-height: 39px;
                                justify-content: space-around;
                                color: #606266;
                                .top-title {
                                    display: block;
                                }
                                .bottom-tittle {
                                    font-size: 10px;
                                }
                            }
                        }
                        .thumbs-up {
                            display: flex;
                            justify-content: space-evenly;
                            .center-cut {
                                width: 1px;
                                // margin: 0 27px;
                                background: #C8E3FF;
                            }
                            .bup {
                                span {
                                    font-size: 10px;
                                    color: #adadad;
                                }
                            }
                            h4 {
                                margin: 0;
                                font-size: 20px;
                                color: #1E90FF;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>